<template>
    <el-form ref="form" :model="formData" label-width="70px">
        <el-form-item prop="codingType" :label="$t('m.label.codingType')">
            <el-select
                size="small"
                :placeholder="$t('m.placeholder.pleaseEnteModel_ASIN_SKU')"
                v-model="formData.codingType"
                class="placeholder"
            >
                <el-option :label="$t('m.label.Model')" value="findProductByModelNumber/"></el-option>
                <el-option :label="$t('m.label.ASIN')" value="findProductByAsin/"></el-option>
                <el-option :label="$t('m.label.SKU')" value="findProductBySku/"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="fieldValue">
            <el-input
                size="small"
                v-model="formData.fieldValue"
                @blur="formData.productId = ''"
                :placeholder="$t('m.placeholder.pleaseEnteModel_ASIN_SKU')"
            />
        </el-form-item>
        <el-form-item prop="businessUnitId" label="BU">
            <bu
                :form="formData"
                formId="businessUnitId"
                addSize="mini"
                @selectAll="Bu"
                size="small"
            ></bu>
        </el-form-item>
        <el-form-item prop="productCategoryId" :label="$t('m.label.productCategory')">
            <category
                ref="category"
                :form="formData"
                formId="productCategoryId"
                formBU="businessUnitId"
                @selectAll="Category"
                addSize="mini"
                size="small"
            ></category>
        </el-form-item>
        <el-form-item prop="productId" :label="$t('m.label.productModelNumber')">
            <product
                ref="product"
                formId="productId"
                formBU="businessUnitId"
                formCategory="productCategoryId"
                :form="formData"
                @selectAll="Product"
                addSize="mini"
                size="small"
            ></product>
        </el-form-item>
        <el-form-item>
            <el-button
                @click="onSubmit"
                type="primary"
                size="small"
                icon="el-icon-search"
            >{{$t('m.button.search')}}</el-button>
            <el-button
                style="margin-left:0px"
                @click="resetForm('form')"
                size="small"
                icon="el-icon-circle-close"
            >{{$t('m.button.reset')}}</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
const ERR_OK = 200;
import bu from "components/searchfor/bu";
import category from "components/searchfor/category";
import product from "components/searchfor/product";
export default {
    name: "SearchBar",
    data() {
        return {
            formData: {
                codingType: "",
                productCategoryId: "",
                productId: "",
                fieldValue: ""
            }
        };
    },
    created() {
        this.routeQuery();
    },
    mounted() {},
    methods: {
        Bu() {
            this.$refs.category.getCategory();
            this.$refs.product.getProduct();
        },
        Category() {
            this.$refs.product.getProduct();
        },
        Product(value) {
            let productMode = value.find( item => item.productId === this.formData.productId)
            this.formData.productModelNumber = productMode?productMode.productModelNumber:''
            this.formData.fieldValue = "";
            this.formData.codingType = "findProductByModelNumber/";
        },
        routeQuery() {
            switch (this.routeQueryKey()) {
                case "model":
                    this.formData.codingType = "findProductByModelNumber/";
                    this.formData.fieldValue = this.$route.query.model;
                    break;
                case "asin":
                    this.formData.codingType = "findProductByAsin/";
                    this.formData.fieldValue = this.$route.query.asin;
                    break;
                case "sku":
                    this.formData.codingType = "findProductBySku/";
                    this.formData.fieldValue = this.$route.query.sku;
                    break;
                default:
                    this.formData.codingType = "findProductByModelNumber/";
                    this.formData.fieldValue = "SW-01";
                    break;
            }
            this.onSubmit();
        },
        routeQueryKey() {
            for (var i in this.$route.query) {
                return i;
            }
        },
        onSubmit() { 
            this.$emit("onSubmit", this.formData);
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.Bu()
        },
    },
    components: {
        bu,
        category,
        product
    }
};
</script>

<style lang="stylus" scoped>
.el-form {
    padding: 10px;
    background: #ffffff;
}

.el-form-item {
    margin-bottom: 5px;

    .el-input {
        max-width: 199px;
    }
}
</style>

